<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 校园活动报名平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 960px;
        }
        .header {
            padding: 2rem 0;
            text-align: center;
        }
        .card {
            margin-bottom: 1.5rem;
        }
        .footer {
            margin-top: 3rem;
            padding: 1.5rem 0;
            color: #777;
            border-top: 1px solid #e5e5e5;
            text-align: center;
        }
        .nav-item {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>校园活动报名平台</h1>
            <p class="lead">个人信息管理</p>
        </div>

        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">活动平台</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="activities.html">活动列表</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="create-activity.html">创建活动</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="my-activities.html">我的活动</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="profile.html">个人信息</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#" id="logoutBtn">退出登录</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">个人信息</h5>
                        <form id="profileForm">
                            <div class="mb-3">
                                <label for="username" class="form-label">用户名</label>
                                <input type="text" class="form-control" id="username" readonly>
                            </div>
                            <div class="mb-3">
                                <label for="name" class="form-label">姓名</label>
                                <input type="text" class="form-control" id="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="email">
                            </div>
                            <div class="mb-3">
                                <label for="phone" class="form-label">手机号</label>
                                <input type="tel" class="form-control" id="phone">
                            </div>
                            <div class="mb-3">
                                <label for="studentId" class="form-label">学号</label>
                                <input type="text" class="form-control" id="studentId">
                            </div>
                            <button type="submit" class="btn btn-primary">保存信息</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer">
            <p>© 2025 校园活动报名平台</p>
        </footer>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局变量
        let currentUser = null;
        const API_BASE_URL = '/api';

        // 页面加载完成后执行
        $(document).ready(function() {
            // 检查登录状态
            checkLoginStatus();

            // 退出登录按钮点击事件
            $('#logoutBtn').on('click', function() {
                logout();
            });

            // 个人信息表单提交事件
            $('#profileForm').on('submit', function(e) {
                e.preventDefault();
                updateProfile();
            });
        });

        // 检查登录状态
        function checkLoginStatus() {
            const user = localStorage.getItem('currentUser');
            if (user) {
                currentUser = JSON.parse(user);
                loadUserInfo();
            } else {
                // 未登录，跳转到登录页面
                window.location.href = 'login.html';
            }
        }

        // 退出登录
        function logout() {
            localStorage.removeItem('currentUser');
            window.location.href = 'login.html';
        }

        // 加载用户信息
        function loadUserInfo() {
            // 从本地存储加载基本信息
            $('#username').val(currentUser.username);
            $('#name').val(currentUser.name || '');
            $('#email').val(currentUser.email || '');
            $('#phone').val(currentUser.phone || '');
            $('#studentId').val(currentUser.studentId || '');
            
            // 从服务器获取最新信息
            $.ajax({
                url: API_BASE_URL + '/users/' + currentUser.id,
                type: 'GET',
                success: function(response) {
                    if (response.code === 200) {
                        // 更新本地存储和表单
                        currentUser = response.data;
                        localStorage.setItem('currentUser', JSON.stringify(currentUser));
                        
                        $('#username').val(currentUser.username);
                        $('#name').val(currentUser.name || '');
                        $('#email').val(currentUser.email || '');
                        $('#phone').val(currentUser.phone || '');
                        $('#studentId').val(currentUser.studentId || '');
                    } else {
                        alert('获取用户信息失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('获取用户信息失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }

        // 更新个人信息
        function updateProfile() {
            const profileData = {
                id: currentUser.id,
                username: currentUser.username,
                name: $('#name').val(),
                email: $('#email').val(),
                phone: $('#phone').val(),
                studentId: $('#studentId').val()
            };

            $.ajax({
                url: API_BASE_URL + '/users/update',
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(profileData),
                success: function(response) {
                    if (response.code === 200) {
                        alert('个人信息更新成功');
                        // 更新本地存储
                        currentUser = response.data;
                        localStorage.setItem('currentUser', JSON.stringify(currentUser));
                    } else {
                        alert('个人信息更新失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('个人信息更新失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }
    </script>
</body>
</html> 